<template>
  <div>
      <div class="model">
          <div class="model-header">
              <div class="h-year">
                  <UrlNav v-if="countryStatus" />
                  <span class="select">
                      <select name="" id="" v-model="selectYear">
                          <option value="2020">2020</option>
                          <option value="2019">2019</option>
                          <option value="2018">2018</option>
                      </select>
                  </span>
              </div>
              <div class="h-info">
                  <div class="info">
                      <p>生产企业:{{enterpriseData.total}}家</p>
                      <p>全市占比:{{enterpriseData.percentage}}</p>
                  </div>
                  <div class="info">
                      <p>注册产品:{{productData.total}}件</p>
                      <p>全市占比:{{productData.percentage}}</p>
                  </div>
              </div>
          </div>
          <div id="china_map"></div>
      </div>
  </div>
</template>
<script>
import UrlNav from '@/components/urlNav'
import { getEnterpriseTotal, getProductTotal, getProvinceJson, getParkNum } from '@/api/park.js'
let tipTime
const coordData = [{
    name: '上海漕河泾新兴技术开发区',
    value: [121.410219, 31.178222]
}, {
    name: '上海漕河泾浦江国际科技城',
    value: [121.516231, 31.104281]
}, {
    name: '上海漕河泾开发区松江高科技园',
    value: [121.326864,31.100262]
}, {
    name: '上海漕河泾开发区新经济园(漕河路)',
    value: [121.304456,31.051651]
}, {
    name: '临港产业区',
    value: [121.825911,30.878591]
}, {
    name: '临港奉贤园区',
    value: [121.769229,30.884002]
}, {
    name: '临港科技城',
    value: [121.925917,30.872403]
}, {
    name: '漕河泾开发区南桥园区',
    value: [121.491989, 30.957832]
}, {
    name: '漕河泾南桥欣创园',
    value: [121.4877,30.9734]
}]

export default {
    name: 'EchartsMap',
    data() {
        return {
            echart: '',
            step: this.$store.getters.step,
            path: this.$route.path,
            selectYear: this.$store.getters.year || '2020',
            resData: [
                {
                    "name": "黄浦区",
                    "value": 6
                }, {
                    "name": "徐汇区",
                    "value": 39
                }, {
                    "name": "长宁区",
                    "value": 6
                }, {
                    "name": "静安区",
                    "value": 9
                }, {
                    "name": "普陀区",
                    "value": 35
                }, {
                    "name": "虹口区",
                    "value": 11
                }, {
                    "name": "杨浦区",
                    "value": 28
                }, {
                    "name": "闵行区",
                    "value": 89
                }, {
                    "name": "宝山区",
                    "value": 72
                }, {
                    "name": "嘉定区",
                    "value": 93
                }, {
                    "name": "浦东新区",
                    "value": 100
                }, {
                    "name": "金山区",
                    "value": 51
                }, {
                    "name": "松江区",
                    "value": 116
                }, {
                    "name": "青浦区",
                    "value": 70
                }, {
                    "name": "奉贤区",
                    "value": 250
                }, {
                    "name": "崇明区",
                    "value": 16
                }],
            countData: {},
            countryStatus: false,
            enterpriseData: {
                total: 0,
                percentage: '100%'
            },
            productData: {
                total: 0,
                percentage: '100%'
            },
            scatterData: []
        }
    },
    components: {
        UrlNav
    },
    mounted() {
        let array = ['全部园区']
        sessionStorage.setItem('urlNav', array);
        this.countryStatus = true
        // this.$store.dispatch('app/setYear', this.selectYear);
    },
    methods: {
        async getTotalNum() {
            this.enterpriseData = await getEnterpriseTotal({
                year: this.selectYear
            })
            this.productData = await getProductTotal({
                year: this.selectYear
            })
            const res = await getParkNum({
                year: this.selectYear
            })
            this.scatterData = res.map(item => {
                const coordInfo = coordData.find(coordItem => coordItem.name === item.parkName)
                return {
                    ...coordInfo,
                    enterpriseNum: item.enterpriseNum,
                    productNum: item.productNum,
                    img: require(`@/static/images/${coordInfo.name}.jpg`)
                }
            })
            this.getProvinceInitList();
        },
        async getProvinceInitList() {
            let array = []
            let reName;
            if (this.echart != '') {
                this.resData.map(e => {
                    reName = e.name.replace(/省|市|自治区|特别行政区|壮族|回族|维吾尔/g, "")
                    e.name = reName
                    array.push({...e})
                })
                let obj = {
                    name: 'shanghai',
                    data: array,
                    scatterData: this.scatterData
                }
                this.echart.setOption(this.$lib.map(obj))
            } else {
                this.initMap(this.resData)
            }
        },
        async initMap(data) {
            if (data == undefined) return
            let array = []
            let reName;
            data.map(e => {
                reName = e.name.replace(/省|市|自治区|特别行政区|壮族|回族|维吾尔/g, "")
                e.name = reName
                array.push({...e})
            })
            let obj = {
                name: 'shanghai',
                data: array,
                scatterData: this.scatterData
            }
            const { data: cityData } = await getProvinceJson({}, 'shanghai')

            this.$echarts.registerMap('shanghai', cityData);
            this.echart = this.$echarts.init(document.getElementById("china_map"));
            this.echart.setOption(this.$lib.map(obj))
            this.echart.on('click', (params) => {
                event.stopPropagation()// 阻止冒泡
                this.$store.commit('app/SET_PARK_NAME', params.name)
                this.$store.commit('app/SET_LAL', params.value)
                this.$router.push('/screen/province')
            })
            window.onresize = () => {
                this.echart.resize();
            }
        }
    },
    watch: {
        selectYear: {
            handler: function (nVal, oVal) {
                this.getTotalNum()
                // this.getProvinceInitList(nVal)
                this.$store.dispatch("app/setYear", nVal);
            },
            immediate: true
        }
    },
    destroyed() {
        clearInterval(tipTime)
    }
}
</script>
<style scoped lang="scss">
.model {
    height: 31.7vw;
    position: relative;

    #china_map {
        padding: 5.4vw 0 0 0;
        width: 100%;
        height: 30vw;
    }

}

.model-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;

    .h-year {
        text-align: center;

        .select {
            position: relative;
            vertical-align: middle;

            select {
                appearance: none;
                font-size: screenVw(1);
                background: #000;
                color: #fff;
                border: 0;
                padding: .2vw 1.4vw .2vw .6vw;
            }

            &::before {
                content: "";
                position: absolute;
                top: 50%;
                right: .3vw;
                transform: translate(0, -50%);
                border-right: .4vw solid transparent;
                border-left: .4vw solid transparent;
                border-top: .4vw solid #fff;
            }
        }
    }
}

.h-info {
    margin: screenVw(.4) 0 0 0;
    display: flex;

    .info {
        flex: 1;
        color: #78dffd;
        font-size: screenVw(1);
        font-weight: bold;
    }

    .info:first-child {

    }

    .info:last-child {
        text-align: right;
    }
}
// .urlNav{
//     display: inline-block;
//     vertical-align: middle;
//     margin: 0 screenVw(1.2) 0 0;
//     div{
//         display: inline-block;
//     }
//     label{
//         font-size: screenVw(2);
//         color: #50EEFF;
//         vertical-align: middle;
//     }
//     span{
//         color: #50EEFF;
//         display: inline-block;
//         vertical-align:middle;
//         margin: 0 .4vw;
//     }
// }
</style>
